<template>
  <footer class="foot">
    <div class="foot__price">
      实付金额<span class="foot__price__num">&yen;{{ change.price }}</span>
    </div>
    <div class="foot__btn" @click="handleInput(true)">提交订单</div>
  </footer>
  <div class="mask" v-if="input" @click.self="handleInput(false)">
    <div class="mask__content" >
      <h3 class="mask__content__tittle">确认要离开收银台？</h3>
      <p class="mask__content__text">请尽快完成支付，否则将被取消</p>
      <p class="mask__content__btns">
        <span
          class="mask__content__btns--first"
          @click="handleConfirm(true), handleCancel()"
          >取消订单</span
        >
        <span class="mask__content__btns--last" @click="handleConfirm(false)"
          >确认支付</span
        >
      </p>
    </div>
    <Toast v-if="show" :message="message" />
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { useStore } from "vuex";
import { useContent } from "./useContent";
import { post } from "../../utils/post";
import Toast, { useToast } from "../../components/Toast";

const useHandleConfirm = (changeMessage) => {
  const { change, shopId } = useContent();
  const shopName = change.value.content.shopName;
  const productList = change.value.content.productList;
  const router = useRouter();
  const store = useStore();
  const products = [];
  const input = ref(false);
  for (let k in productList) {
    products.push({ id: productList[k]._id, num: productList[k].count });
  }
  // 设置handleConfirm方法在点击“确认支付”或“取消订单”后，给模拟接口发送购物车的相关数据
  const handleConfirm = async (isCanceled) => {
    try {
      const result = await post("/api/order", {
        addressId: '60422192aed7e61544a4aaca',
        shopId,
        shopName,
        isCanceled,
        products,
      });
      console.log(result);
      if (result?.errno === 0) {
        // 在成功接收到返回信息后，转到“订单”页面
        router.push({ name: "Order" });
      } else {
        changeMessage("确认支付失败");
        setTimeout(() => {
          router.push({ name: "Order" });
        }, 2000);
      }
    } catch (e) {
      console.log(e);
    }
  };
  // 点击“取消订单”按钮后执行store中的clearChecked方法
  const handleCancel = () => {
    store.commit("clearChecked", { shopId });
  };
  const handleInput = (v) => {
    store.commit("clearChecked", { shopId });
    input.value = v;
  };
  return { change, handleConfirm, handleInput, input, handleCancel };
};

export default {
  name: "Foot",
  components: { Toast },
  setup() {
    const { show, message, changeMessage } = useToast();
    const {
      change,
      handleConfirm,
      handleInput,
      input,
      handleCancel,
    } = useHandleConfirm(changeMessage);
    return {
      change,
      handleConfirm,
      show,
      message,
      handleInput,
      input,
      handleCancel,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables";
p,
ul,
h3 {
  list-style: none;
  margin: 0;
  padding: 0;
}
.foot {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 0.5rem;
  background-color: #fff;
  display: flex;
  font-size: 0.14rem;
  line-height: 0.5rem;
  &__price {
    flex: 1;
    padding-left: 0.24rem;
    &__num {
      font-size: 0.16rem;
      margin-left: 0.05rem;
    }
  }
  &__btn {
    width: 0.98rem;
    background-color: $btn-ligjtbgcolor;
    color: #fff;
    text-align: center;
  }
}
.mask {
  z-index:999999;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  &__content {
    position: absolute;
    width: 3rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 0.24rem 0;
    text-align: center;
    border-radius: 0.04rem;
    &__tittle {
      font-size: 0.18rem;
      color: $content-fontcolor;
      margin-bottom: 0.08rem;
    }
    &__text {
      font-size: 0.14rem;
      color: #666;
      margin-bottom: 0.24rem;
    }
    &__btns {
      font-size: 0.14rem;
      &--first,
      &--last {
        width: 0.8rem;
        height: 0.32rem;
        display: inline-block;
        box-sizing: border-box;
        border-radius: 0.16rem;
      }
      &--first {
        border: 1px solid $btn-ligjtbgcolor;
        color: $btn-ligjtbgcolor;
        background-color: #fff;
        line-height: 0.3rem;
        margin-right: 0.24rem;
      }
      &--last {
        color: #fff;
        background-color: $btn-ligjtbgcolor;
        line-height: 0.32rem;
      }
    }
  }
}
</style>